<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Title</title>
    <link rel="stylesheet" href="org/bootstrap/css/bootstrap.css">
    <script src="js/jquery-3.1.1.min.js"></script>
    <script src="org/bootstrap/js/bootstrap.js"></script>
    <script src="js/vue.min.js"></script>
    <script>
        window.onload=function () {
            new Vue({
                el:'#box',
                data:{
                    list:[],
                    name:'',
                    passwd:'',
                    nowIndex:''
                },
                methods:{
                    add:function () {
                        this.list.push({
                            name:this.name,
                            passwd:this.passwd
                        });
                        this.name=this.passwd='';
                    },
                    reset:function () {
                        this.name=this.passwd='';
                    },
                    del:function () {
                        if(this.nowIndex==-1){
                            this.list=[];
                        }else{
                            this.list.splice(this.nowIndex,1);
                        }
                    }
                }
            })
        }
    </script>
</head>
<body>
<div class="container" id="box">
    <form class="form-horizontal" action="#">
        <div class="form-group">
            <lable class="col-md-1 control-label">姓名</lable>
            <div class="col-md-11">
                <input type="text" class="form-control" placeholder="请输入姓名" v-model="name">
            </div>
        </div>
        <div class="form-group">
            <lable class="control-label col-md-1 text-left">密码</lable>
            <div class="col-md-11">
                <input type="password" class="form-control" placeholder="请输入密码" v-model="passwd">
            </div>
        </div>
        <div class="col-md-10 col-md-offset-1">
            <button class="btn btn-success" v-on:click="add()">添加</button>
            <button class="btn btn-danger" v-on:click="reset()">重置</button>
        </div>
    </form>
    <table class="table table-bordered">
        <caption class="text-center">
            <h1>用户信息表</h1>
        </caption>
        <tr>
            <th class="text-center">序号</th>
            <th class="text-center">名字</th>
            <th class="text-center">密码</th>
            <th class="text-center">操作</th>
        </tr>
        <tr class="text-center" v-for="(v,k) in list">
            <td>{{k+1}}</td>
            <td>{{v.name}}</td>
            <td>{{v.passwd}}</td>
            <td><button class="btn btn-warning" data-toggle="modal" data-target="#myModal" v-on:click="nowIndex=k">删除</button></td>
        </tr>
        <tr v-show="list.length==0">
            <td colspan="4" class="text-center text-muted">
                <p>暂无数据...</p>
            </td>
        </tr>
    </table>
    <button class="btn btn-danger pull-right" v-show="list.length!=0" data-toggle="modal" data-target="#myModal" v-on:click="nowIndex=-1">全部删除</button>

    <!-- Modal -->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModalLabel">模态框</h4>
                </div>
                <div class="modal-body">
                    您确定要删除吗？
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" data-dismiss="modal"  v-on:click="del()">确定</button>
                </div>
            </div>
        </div>
    </div>

</div>
</body>
</html>